<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<%@include file="../common.jsp" %>
<html>
<head>
  <title>Title</title>
  <%--引入 echarts.js--%>
  <script src="${pageContext.request.contextPath}/static/echarts/echarts.js"></script>
</head>
<body>
<%--头部工具栏--%>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-danger " lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
<%--行内工具栏--%>
<script type="text/html" id="rowBarDemo">
  <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
  <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="sel">查看</a>
</script>
<%--模糊查询--%>
<form class="layui-form" action="" style="margin-top: 10px">
  <div class="layui-inline">
    <label class="layui-form-label">姓名</label>
    <div class="layui-inline">
      <input type="text" name="name" placeholder="请输入姓名" class="layui-input">
    </div>
  </div>
  </div>
  <div class="layui-inline">
    <div class="layui-inline">
      <button class="layui-btn" lay-filter="formDemo" lay-submit>查询</button>
      <button type="reset" lay-submit class="layui-btn layui-btn-primary" id="myButton">重置</button>
    </div>
  </div>
</form>
<style>
  #show {
    margin: auto;
    background: pink;
    font-family: 叶根友毛笔行书简体;
    font-size: 30px;
  }

  #bb {
    width: 200px;
    height: 80px;
    margin: auto;
    line-height: 80px;
  }

  #result {
    width: 400px;
    height: 80px;
    margin: auto;
    line-height: 80px;
  }
</style>
<%--饼图--%>
<div id="show" style="width: 100%;height: 100%; display: none;">
  <div id="bb">Mht测试结果</div>
  <div id="result"></div>
  <div style="width: 100%;height: 350px;" id="results"></div>
</div>
<table id="demo" lay-filter="test"></table>
</body>
<script>
  layui.config({
    version: 1,
    base: 'echarts/'
  }).use(['element', 'echarts', 'carousel', 'table', 'jquery','form'], function () {
    var element = layui.element,
            $ = layui.jquery,
            table = layui.table,
            form = layui.form,
            carousel = layui.carousel,
            echarts = layui.echarts;

    //第一个实例
    var myTable = table.render({
      elem: '#demo'
      , height: 430
      , url: '${pageContext.request.contextPath}/viewTestResultMht/queryAllByCondition.do' //数据接口
      , page: true
      , limit: 5
      , limits: [5, 10, 15, 20, 25, 30, 50, 100]
      , toolbar: '#barDemo'
      , cols: [
        [ //表头
          {type: 'checkbox', fixed: 'left'}
          ,{field: 'testerId', title: '编号ID', width:60, sort: true, fixed: 'left'}
          ,{field: 'name', title: '用户名', width:72}
          ,{field: 'phone', title: '电话', width:60}
          ,{field: 'createTime', title: '答题时间', width:88}
          ,{field: 'xx', title: '学习焦虑', width:80}
          ,{field: 'dr', title: '对人焦虑', width:80}
          ,{field: 'gd', title: '孤独倾向', width:80}
          ,{field: 'zz', title: '自责倾向', width:80}
          ,{field: 'gm', title: '过敏倾向', width:80}
          ,{field: 'st', title: '身体症状', width:80}
          ,{field: 'kb', title: '恐怖倾向', width:80}
          ,{field: 'cd', title: '冲动倾向', width:80}
          ,{field: 'xdpg', title: '效度评估', width:80}
          ,{field: 'zf', title: '总分', width:80}
          , {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#rowBarDemo'}

        ]
      ]
    });
    table.on('sort(test)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      console.log(obj.field); //当前排序的字段名
      console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
      console.log(this); //当前排序的 th 对象
      //尽管我们的 table 自带排序功能，但并没有请求服务端。
      //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
      table.reload('demo', {
        initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
        , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
          field: obj.field //排序字段
          , order: obj.type //排序方式
        }
      });
      /*    layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);*/
    });
    //监听头工具栏事件
    table.on('toolbar(test)', function (obj) {
      var checkStatus = table.checkStatus(obj.config.testerId)
              , data = checkStatus.data; //获取选中的数据
      switch (obj.event) {
        case 'delete':
          if (data.length === 0) {
            layer.msg('请选择一行');
          } else {
            //定义一个数组，封装所有的id
            var ids = [];
            //循环所有选中的行
            for (let i = 0; i < data.length; i++) {
              ids[i] = data[i].testerId;
            }
            console.log(ids.join(","))
            layer.confirm('真的删除行么', function (index) {
              //去后台批量删除数据
              $.ajax({
                url: "${pageContext.request.contextPath}/viewTestResultMht/delViewMhtById.do",
                type: "POST",
                dataType: "JSON",
                data: {id: ids.join(",")},
                success: function (data) {
                  if (data.code == 0) {
                    //关闭对话框
                    layer.closeAll(); //疯狂模式，关闭所有层
                    //刷新表格数据
                    table.reload('demo', {
                      page: {
                        curr: 1 //重新从第 1 页开始
                      }
                    });

                  }
                  layer.msg(data.msg);
                }

              });
            });
          }
          break;
      }
      ;
    });
    //监听行工具事件
    table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data //获得当前行数据
              , layEvent = obj.event; //获得 lay-event 对应的值
      console.log(data)
      if (layEvent === 'del') {
        layer.confirm('真的删除行么', function (index) {
          //去后台批量删除数据
          $.ajax({
            url: "${pageContext.request.contextPath}/viewTestResultMht/delViewMhtById.do",
            type: "POST",
            dataType: "JSON",
            data: {id: data.testerId},
            success: function (data) {
              if (data.code == 0) {
                //关闭对话框
                layer.closeAll(); //疯狂模式，关闭所有层
                //刷新表格数据
                table.reload('demo');

              }
              layer.msg(data.msg);
            }

          });
        });
      }
      else if (layEvent === 'sel') {
        layer.open({
          title: 'Mht测试结果',
          type: 1,
          content: $('#show'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
          area: ['600px', '600px']
        });
        $.ajax({
          url: "${pageContext.request.contextPath}/viewTestResultMht/queryById.do",
          type: "post",
          dataType: "json",
          data: {testerId: data.testerId},
          success: function (data) {
            var xx = data.data.xx;
            var inversion = data.data.inversion;
            var myChart = echarts.init(document.getElementById('results'));
            var string = "";
            $("#result").html(string)
            var option = {
              title: {
                text: '您的测试占比为',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              },
              series: [
                {
                  name: 'Access From',
                  type: 'pie',
                  radius: '50%',
                  data: [
                    {value: data.data.xx, name: '学习焦虑'},
                    {value: data.data.dr, name: '对人焦虑'},
                    {value: data.data.gd, name: '孤独倾向'},
                    {value: data.data.zz, name: '自责倾向'},
                    {value: data.data.gm, name: '过敏倾向'},
                    {value: data.data.st, name: '身体症状'},
                    {value: data.data.kb, name: '恐怖倾向'},
                    {value: data.data.cd, name: '冲动倾向'},
                    {value: data.data.xd, name: '效度评估'},
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
          }
        })
      }
    });
    <!--提交条件查询-->
    $.ajax({
      url: "${pageContext.request.contextPath}/viewTestResultSas/pullSas.do",
      type: "POST",
      dataType: "JSON",
      success: function (ret) {
        if (ret.code == 0) {
          var htmlStr = "<option value=''>请选择ID</option>";
          for (let i = 0; i < ret.data.length; i++) {
            htmlStr += "<option value=" + ret.data[i].testPlanId + ">测试ID：" + ret.data[i].testPlanId + "</option>"
          }
          $("#planId").html(htmlStr);
          //重新渲染表单
          layui.use('form', function () {
            form.render('select');
          })
        }
      }
    });

    form.on('submit(formDemo)', function (data) {
      console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
      //提交表单数据
      myTable.reload({
        where: { //设定异步数据接口的额外参数，任意设
          name: data.field.name,
          testPlanId: data.field.testPlanId
        }
        ,
        page: {
          curr: 1 //重新从第 1 页开始
        }
      });
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
    /**
     * 重置
     */
    $("#myButton").click(function () {
      myTable.reload({
        where: { //设定异步数据接口的额外参数，任意设
          name: "",
        }
        , page: {
          curr: 1 //重新从第 1 页开始
        }
      });
    });
  })
</script>
</html>
